<template>
  <view class="paging-content">
    <z-paging ref="paging" v-model="dataObj.dataList" @query="queryList"></z-paging>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
const paging = ref();
const dataObj = reactive({
  dataList: [],
  firstLoaded: false, // 当前组件是否已经加载过了
  isCurrentPage: false // 是否滚动到当前页
});
const props = defineProps({
  tabIndex: {
    type: String,
    required: true
  },
  currentIndex: {
    type: String,
    required: true
  }
});

// 接口请求
function queryList(pageNo: number, pageSize: number) {
  setTimeout(() => {
    paging.value.complete([]);
    dataObj.firstLoaded = true;
  }, 1000);
}

watch(
  () => props.currentIndex,
  (newVal) => {
    if (newVal === props.tabIndex) {
      // 懒加载，当滑动到当前的item时，才去加载
      if (!dataObj.firstLoaded) {
        // 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
        setTimeout(() => {
          dataObj.isCurrentPage = true;
        }, 100);
      }
    }
  },
  {
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
.paging-content {
  height: 100%;
  background-color: yellow;
}
</style>
